<template>
  <Modal v-model="isOpen" title="看板成员" class="board-members">
    <div class="members-list">
      <div v-for="member in board.members" :key="member.user._id" class="member-item">
        <Avatar :user="member.user" />
        <div class="member-info">
          <span class="username">{{ member.user.username }}</span>
          <select 
            v-if="isAdmin"
            v-model="member.role"
            @change="updateMemberRole(member)"
          >
            <option value="viewer">查看者</option>
            <option value="editor">编辑者</option>
            <option value="admin">管理员</option>
          </select>
          <span v-else class="role">{{ roleLabels[member.role] }}</span>
        </div>
        <button 
          v-if="isAdmin && member.user._id !== currentUser._id"
          @click="removeMember(member)"
          class="remove-btn"
        >
          移除
        </button>
      </div>
    </div>

    <div v-if="isAdmin" class="invite-section">
      <h3>邀请成员</h3>
      <div class="invite-form">
        <input 
          v-model="inviteEmail"
          type="email"
          placeholder="输入邮箱地址"
        />
        <select v-model="inviteRole">
          <option value="viewer">查看者</option>
          <option value="editor">编辑者</option>
          <option value="admin">管理员</option>
        </select>
        <button @click="inviteMember">邀请</button>
      </div>
    </div>
  </Modal>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useAuthStore } from '../../stores/auth';
import { useBoardStore } from '../../stores/board';
import Modal from '../Common/Modal.vue';
import Avatar from '../../../../../client/src/components/Common/Avatar.vue';

const props = defineProps({
  board: {
    type: Object,
    required: true
  }
});

const authStore = useAuthStore();
const boardStore = useBoardStore();

const currentUser = computed(() => authStore.user);
const isAdmin = computed(() => {
  const userMember = props.board.members.find(m => m.user._id === currentUser.value._id);
  return userMember?.role === 'admin';
});

const inviteEmail = ref('');
const inviteRole = ref('viewer');

const roleLabels = {
  viewer: '查看者',
  editor: '编辑者',
  admin: '管理员'
};

const updateMemberRole = async (member) => {
  await boardStore.updateMemberRole({
    boardId: props.board._id,
    userId: member.user._id,
    role: member.role
  });
};

const removeMember = async (member) => {
  await boardStore.removeMember({
    boardId: props.board._id,
    userId: member.user._id
  });
};

const inviteMember = async () => {
  if (!inviteEmail.value) return;
  
  await boardStore.inviteMember({
    boardId: props.board._id,
    email: inviteEmail.value,
    role: inviteRole.value
  });
  
  inviteEmail.value = '';
};
</script>

<style scoped>
.board-members {
  width: 480px;
  max-width: 90vw;
}

.member-item {
  display: flex;
  align-items: center;
  padding: 8px;
  border-bottom: 1px solid #DFE1E6;
}

.member-info {
  flex: 1;
  margin-left: 12px;
}

.username {
  font-weight: 500;
}

.role {
  color: #5E6C84;
  font-size: 12px;
  margin-left: 8px;
}

.invite-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #DFE1E6;
}

.invite-form {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.remove-btn {
  color: #EB5A46;
}
</style> 